﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ManageUser.aspx.cs" Inherits="WebAddressBook.ManageUser" %>

<%@ Register Src="~/HeaderControl.ascx" TagName="HeaderControl" TagPrefix="uc1" %>
<%@ Register Src="~/CoypyrightControl.ascx" TagName="CoypyrightControl" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>用户管理页</title>
    <meta name="description" content="Administry - Admin Template by Zoran Juric" />
    <meta name="keywords" content="Admin,Template" />
    <!-- Favicons -->
    <link rel="shortcut icon" type="image/png" href="img/favicons/favicon.png" />
    <link rel="icon" type="image/png" href="img/favicons/favicon.png" />
    <link rel="apple-touch-icon" href="img/favicons/apple.png" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!-- Colour Schemes
Default colour scheme is blue. Uncomment prefered stylesheet to use it.
<link rel="stylesheet" href="css/brown.css" type="text/css" media="screen" />  
<link rel="stylesheet" href="css/gray.css" type="text/css" media="screen" />  
<link rel="stylesheet" href="css/green.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/pink.css" type="text/css" media="screen" />  
<link rel="stylesheet" href="css/red.css" type="text/css" media="screen" />
-->
    <!-- Your Custom Stylesheet -->
    <link rel="stylesheet" href="css/custom.css" type="text/css" />
    <!--swfobject - needed only if you require <video> tag support for older browsers -->
    <script type="text/javascript" src="js/swfobject.js"></script>
    <!-- jQuery with plugins -->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <!-- Could be loaded remotely from Google CDN : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
    <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.tabs.min.js"></script>
    <!-- jQuery tooltips -->
    <script type="text/javascript" src="js/jquery.tipTip.min.js"></script>
    <!-- Superfish navigation -->
    <script type="text/javascript" src="js/jquery.superfish.min.js"></script>
    <script type="text/javascript" src="js/jquery.supersubs.min.js"></script>
    <!-- jQuery popup box -->
    <script type="text/javascript" src="js/jquery.nyroModal.pack.js"></script>
    <!-- jQuery form validation -->
    <script type="text/javascript" src="js/jquery.validate_pack.js"></script>
    <!-- Internet Explorer Fixes -->
    <!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie.css"/>
<script src="js/html5.js"></script>
<![endif]-->
    <!--Upgrade MSIE5.5-7 to be compatible with MSIE8: http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js -->
    <!--[if lt IE 8]>
<script src="js/IE8.js"></script>
<![endif]-->
  <%--  <script type="text/javascript">
        $(document).ready(function () {

            /* setup navigation, content boxes, etc... */
            Administry.setup();

            // validate form on keyup and submit
            var validator = $("#sampleform").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    password_confirm: {
                        required: true,
                        minlength: 5,
                        equalTo: "#password"
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    dateformat: "required",
                    terms: "required"
                },
                messages: {
                    firstname: "Enter your firstname",
                    lastname: "Enter your lastname",
                    username: {
                        required: "Enter a username",
                        minlength: jQuery.format("Enter at least {0} characters")
                    },
                    password: {
                        required: "Provide a password",
                        rangelength: jQuery.format("Enter at least {0} characters")
                    },
                    password_confirm: {
                        required: "Repeat your password",
                        minlength: jQuery.format("Enter at least {0} characters"),
                        equalTo: "Enter the same password as above"
                    },
                    email: {
                        required: "Please enter a valid email address",
                        minlength: "Please enter a valid email address"
                    },
                    dateformat: "Choose your preferred dateformat",
                    terms: " "
                },
                // the errorPlacement has to take the layout into account
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent().find('label:first'));
                },
                // specifying a submitHandler prevents the default submit, good for the demo
                submitHandler: function () {
                    alert("Data submitted!");
                },
                // set new class to error-labels to indicate valid fields
                success: function (label) {
                    // set &nbsp; as text for IE
                    label.html("&nbsp;").addClass("ok");
                }
            });

            // propose username by combining first- and lastname
            $("#username").focus(function () {
                var firstname = $("#firstname").val();
                var lastname = $("#lastname").val();
                if (firstname && lastname && !this.value) {
                    this.value = firstname + "." + lastname;
                }
            });

        });
    </script>--%>
    <script language="javascript" type="text/javascript">
        function getLen(str) {
            return str.trim().replace(/[^\x00-\xff]/g, "aa").length; //把汉字替换成两个英文字母来计算长度
        }
        //添加用户时，验证输入是否符合要求
        function validataInput() {
            if (getLen(document.getElementById("userid").value) < 6 || getLen(document.getElementById("userid").value) > 20) {
                alert("登录名不能少于6个字节大于20个字节的长度");
                return false;
            }
            else if (getLen(document.getElementById("username").value) < 4 || getLen(document.getElementById("username").value) > 20) {
                alert("名字不能少于4个字节大于20个字节长度");
                return false;
            }
            else if (getLen(document.getElementById("password").value) < 6 || getLen(document.getElementById("userid").value) > 15) {
                alert("密码不能少于6个字节的大于15个字节的长度");
                return false;
            }
            else if (document.getElementById("password_confirm").value != document.getElementById("password").value) {
                alert("两次密码输入不一致！");
                return false;
            }
            return true;
        }
        //修改用户时，验证输入是否符合要求
        function validataChangeInput() {
            if (getLen(document.getElementById("newUsername").value) < 4 || getLen(document.getElementById("newUsername").value) > 20) {
                alert("新名字不能少于4个字节大于20个字节长度");
                return false;
            }
            else if (getLen(document.getElementById("newPassword").value) < 6 || getLen(document.getElementById("newPassword").value) > 15) {
                alert("新密码不能少于6个字节的大于15个字节的长度");
                return false;
            }
            else if (document.getElementById("newPassword_confirm").value != document.getElementById("newPassword").value) {
                alert("两次密码输入不一致！");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form runat="server">
    <!-- Header -->
    <div>
        <uc1:HeaderControl ID="HeadControl1" runat="server" />
    </div>
    <!-- End of Header -->
    <!-- Page title -->
    <div id="pagetitle">
        <div class="wrapper">
            <h1>
                用户管理</h1>
        </div>
    </div>
    <!-- End of Page title -->
    <!-- Page content -->
    <div id="page">
        <!-- Wrapper -->
        <div class="wrapper">
            <!-- Left column/section -->
            <section class="column width8 first">					
					<div class="box box-info">账号添加</div>					
                       <div id="AddUserDiv" runat="server">
						<fieldset>
							<legend>添加一个账号</legend>
                            <p>
								<label class="required" for="userid">登陆名:</label><br/>
								<input type="text" id="userid" runat="server" class="half" value="" name="userid"/>
								<small>最少6个字节，例如：ABCDEF。请不要用汉字</small>
							</p>
							<p>
								<label class="required" for="username">名字:</label><br/>
								<input type="text" id="username" runat="server" class="half" value="" name="username"/>
								<small>例如：张三。请不要超过五个汉字</small>
							</p>
							
							<p>
								<label class="required" for="password">密码:</label><br/>
								<input type="password" id="password" runat="server" class="half" value="" name="password"/>
							</p>

							<p>
								<label class="required" for="password_confirm">确认密码:</label><br/>
								<input type="password" id="password_confirm" runat="server" class="half" value="" name="password_confirm"/>
							</p>
                            <p>
                            <asp:Label ID="LbMessage" runat="server" Text="" ForeColor="Red"></asp:Label>
                            </p>
                            <p>
                            <asp:Button ID="BtAddUser" runat="server" Text="添加" class="btn btn-blue" 
                                    onclick="BtAddUser_Click" OnClientClick="return validataInput()"></asp:Button>
                            </p>
                         </fieldset>
                        </div>
                    <div>
                    <fieldset>
                      	<legend>修改个人信息</legend>
                            <p>
								<label class="required" for="newUserid">登陆名:</label><br/>
								<input type="text" id="newUserid" runat="server" class="half" readonly="readonly" value="" name="newUserid"/>
							</p>
							<p>
								<label class="required" for="newUsername">名字:</label><br/>
								<input type="text" id="newUsername" runat="server" class="half" value="" name="newUsername"/>
								<small>例如：张三。请不要超过五个汉字</small>
							</p>
							<p>
								<label class="required" for="OldPassword">旧密码:</label><br/>
								<input type="password" id="OldPassword" runat="server" class="half" value="" name="OldPassword"/>
							</p>
							<p>
								<label class="required" for="newPassword">新密码:</label><br/>
								<input type="password" id="newPassword" runat="server" class="half" value="" name="newPassword"/>
							</p>

							<p>
								<label class="required" for="newPassword_confirm">确认新密码:</label><br/>
								<input type="password" id="newPassword_confirm" runat="server" class="half" value="" name="newPassword_confirm"/>
							</p>
                            <p>
                            <asp:Label ID="LbChangeMessage" runat="server" Text="" ForeColor="Red"></asp:Label>
                            </p>
                            <p>
                            <asp:Button ID="BtChangeUserInfo" runat="server" Text="修改" class="btn btn-blue" 
                                     OnClientClick="return validataChangeInput()" onclick="BtChangeUserInfo_Click"></asp:Button>
                            </p>
                         </fieldset>  
                    </div>
                    <div id="AllUserDiv" runat="server">
                    <div class="box box-info">所有管理员用户列表</div>
                    <div>
                        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" CssClass="stylized full" 
                            AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" 
                            GridLines="None" PageSize="15" 
                            onpageindexchanging="GridView1_PageIndexChanging" 
                            onsorting="GridView1_Sorting" 
                            onrowdeleting="GridView1_RowDeleting" 
                            onrowdatabound="GridView1_RowDataBound">
                            <Columns>
                                <asp:BoundField HeaderText="登录名" DataField="UserID" >
                                </asp:BoundField>
                                <asp:BoundField HeaderText="用户名" DataField="UserName" >
                                </asp:BoundField>
                                <asp:BoundField HeaderText="密码" DataField="PassWord">
                                </asp:BoundField>
                                <asp:CommandField ShowDeleteButton="True" >
                                </asp:CommandField>
                            </Columns>
                        </asp:GridView>
                    </div>
                    </div>
				</section>
            <!-- End of Left column/section -->
        </div>
        <!-- End of Wrapper -->
    </div>
    <!-- End of Page content -->
    <!-- Page footer -->
    <div>
        <uc2:CoypyrightControl ID="CoypyrightControl1" runat="server" />
    </div>
    <!-- End Page footer -->
    <!-- User interface javascript load -->
    <script type="text/javascript" src="js/administry.js"></script>
    </form>
</body>
</html>
